<template>
  <view class="container">
      <img class="banner" src="@/static/images/synthesis/transition/banner.png" alt="" />
      <view class="info-div">
        <view class="pan-box">
          <img class="tips" src="@/static/images/synthesis/transition/title.png" alt="" />
          <view class="info">
            <view class="info-top">
              <view class="info-item">
                <view class="info-title">姓名</view>
                <view class="info-content">{{username}}</view>
              </view>
            </view>
            <view class="info-bottom">
              <view class="info-item">
                <view class="info-title">性别</view>
                <view class="info-content">{{sex==0?'男':'女'}}</view>
              </view>
            </view>
            <view class="info-bottom">
              <view class="info-item">
                <view class="info-title">生辰</view>
                <view class="info-content">{{birthday}}</view>
              </view>
            </view>
            <view class="info-bottom">
             <view class="info-item">
                <view class="info-title">生地</view>
                <view class="info-content">{{area}}</view>
              </view>
            </view>
            <view class="info-bottom">
             <view class="info-item">
                <view class="info-title">测算号码</view>
                <view class="info-content">{{phone}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="progress-box">
          <view>{{text}}</view>
          <progress :percent="percent" activeColor="#bb2800" stroke-width="12" />
        </view>
      </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        username: '',
        birthday: '',
				solartime: '',
        sex: '',
        area: '',
        textArr: [
          '正在录入命主八字信息',
          '正在排布五行十神',
          '正在生成八字报告',
          '正在测算号码吉凶',
          '正在分析紫薇命格',
          '完成'
        ],
        text: '...',
        percent: 0,
        count: 0,
        timer: null
      }
		},
    mounted() {
      this.query = this.$route.query;
      this.username = this.$route.query.username;
      this.birthday = this.$route.query.birthday;
			this.solartime = this.$route.query.solartime;
      this.sex = this.$route.query.sex;
      this.area = this.$route.query.area;
      this.phone = this.$route.query.phone;
      this.timer = setInterval(() => {
        this.text = this.textArr[this.count];
        this.count++;
        this.percent = this.count * 18;
        if (this.count == 7) {
          clearInterval(this.timer);
          uni.redirectTo({
            url: `/pages/synthesis/synthesisOrder/synthesisOrder?birthday=${this.birthday}&sex=${this.sex}&username=${this.username}&solartime=${this.solartime}&area=${this.area}&phone=${this.phone}`
          })
        }
      }, 600)
    },
		methods: {}
	}
</script>

<style lang="scss" scoped>
  uni-page-body {
    height: 100%;
    overflow-y: hidden;
  }
	.container {
    height: 100%;
		font-size: 28rpx;
		line-height: 24px;
		background: url('@/static/images/synthesis/transition/bg.png') no-repeat;
		background-size: 100% 100%;
    .banner {
      width: 343rpx;
      height: 425rpx;
    }
    .pan-box {
      width: 100%;
      text-align: center;
      margin-bottom: 191rpx;
      .tips {
        width: 487rpx;
        margin-bottom: 31rpx;
      }
      .info {
        width: 640rpx;
        height: 280rpx;
        background-color: #fcefdd;
        border-radius: 15rpx;
        border: solid 4rpx #921905;
        box-sizing: border-box; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 100rpx;
        margin: 0 auto;
        .info-top {
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: space-between
        }
        .info-bottom {
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: space-between
        }
        .info-item {
          display: flex;
          flex-direction: row;
          .info-title {
            width: fit-content;
            text-align: left;
            font-weight: bold;
            color: #bb2800;
            white-space: nowrap;
          }
          .info-content {
            margin-left: 20rpx;
            max-width: 450rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .progress-box {
      width: 80%;
      margin: 60rpx auto 0;
    }
	}
</style>
